import { useQuery } from "@tanstack/react-query";
import styled from "styled-components";
import { Popover, Table, Typography } from "antd";
import { kafkaConsumerList } from "@/api/sharing/kafka";

const ConsumerValue = ({ currentSource, onTransferLeftPanel }) => {
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      render: (text, record, index) => {
        return index + 1
      }
    },
    {
      title: '名称',
      dataIndex: 'groupId',
    },
    {
      title: '主题数量',
      dataIndex: 'topics',
      render: (text, record) => {
        return <Popover content={<>{record.topics?.map((d) => (<p>{d}</p>))}</>} title="主题" trigger="hover">
          <a>{record.topics?.length || 0}</a>
        </Popover>
      }
    },
  ]
  const { data: brokerData } = useQuery({
    queryKey: ['KafkaRightPanel', currentSource?.connectInfo?.id],
    queryFn: () => {
      return kafkaConsumerList({ id: currentSource?.connectInfo?.id }).then(res => {
        return res.result || []
      })
    }
  })
  return (<StyledWrap>
    {/* <Typography.Title level={5}>Consumer Group</Typography.Title> */}
    <Table
      rowKey={(record) => record.groupId}
      dataSource={brokerData || []}
      columns={columns}
      bordered
      pagination={false}
      rowClassName={(record) => {
        return record.groupId === currentSource?.key ? 'current-broker' : ''
      }}
    />
  </StyledWrap>);
}

const StyledWrap = styled.div`
  .current-broker {
    .ant-table-cell{
      background-color: #0e3d71 !important;
    }
  }
`

export default ConsumerValue;